<template>
	
	<div class="header">
		<div class="header-left">
			<div class="iconfont back-icon" >&#xe624;</div>
		</div>
		<div class="header-input iconfont">
			&#xe632;输入城市/景点/游玩主题
		</div>
		<router-link to="/city">
			<div class="header-right iconfont">
				{{city}}
				<span class="iconfont arrow-icon">&#xe60c;</span>
			</div>
		</router-link>
	</div>
	
</template>

<script>
	
	export default {
		name : 'Header',
		props: {
			city : String
		}
	}
	
</script>

<style scoped lang="stylus"  rel="stylesheet/stylus">
	@import '~styles/varibles.styl'
	.header
	 display:flex
	 line-height:.86rem
	 background:$bgColor 
	 color:#fff
	 .header-left
	  width:.64rem
	  float:left
	  .back-icon
	   text-align:center
	   font-size:.4rem
	 .header-input
	  flex:1 
	  height:.64rem
	  margin-top:.12rem
	  margin-left:.2rem
	  background:#fff
	  border-radius:.1rem
	  color:#ccc
	  line-height:.64rem 
	  padding-left:.2rem
	 .header-right 
	  width: 1.24rem
	  float:right
	  color:#fff
	  text-align:center
		
	  .arrow-icon
	   margin-left:-.04rem
	   font-size:.24rem
	 
	 
	
</style>